<script setup>
  import { useLayout } from '@/layouts/components/composables/layout'
  import { onMounted, ref, watch } from 'vue'

  const { getPrimary, getSurface, isDarkTheme } = useLayout()

  const chartData = ref(null)
  const chartOptions = ref(null)

  function setChartData() {
    const documentStyle = getComputedStyle(document.documentElement)

    return {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [
        {
          type: 'bar',
          label: 'Subscriptions',
          backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
          data: [4000, 10000, 15000, 4000],
          barThickness: 32,
        },
        {
          type: 'bar',
          label: 'Advertising',
          backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
          data: [2100, 8400, 2400, 7500],
          barThickness: 32,
        },
        {
          type: 'bar',
          label: 'Affiliate',
          backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
          data: [4100, 5200, 3400, 7400],
          borderRadius: {
            topLeft: 8,
            topRight: 8,
          },
          borderSkipped: true,
          barThickness: 32,
        },
      ],
    }
  }

  function setChartOptions() {
    const documentStyle = getComputedStyle(document.documentElement)
    const borderColor = documentStyle.getPropertyValue('--surface-border')
    const textMutedColor = documentStyle.getPropertyValue('--text-color-secondary')

    return {
      maintainAspectRatio: false,
      aspectRatio: 0.8,
      scales: {
        x: {
          stacked: true,
          ticks: {
            color: textMutedColor,
          },
          grid: {
            color: 'transparent',
            borderColor: 'transparent',
          },
        },
        y: {
          stacked: true,
          ticks: {
            color: textMutedColor,
          },
          grid: {
            color: borderColor,
            borderColor: 'transparent',
            drawTicks: false,
          },
        },
      },
    }
  }

  watch([getPrimary, getSurface, isDarkTheme], () => {
    chartData.value = setChartData()
    chartOptions.value = setChartOptions()
  })

  onMounted(() => {
    chartData.value = setChartData()
    chartOptions.value = setChartOptions()
  })
</script>

<template>
  <div class="card">
    <div class="font-semibold text-xl mb-4">Revenue Stream</div>
    <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
  </div>
</template>
